From 6cb399e7267ae78e3e498bdbf5f51678ffb2cd45 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Tue, 21 Feb 2023 23:24:14 +0100
Subject: feat: Many things

Configure sanity in same project as the app
Implement type safe sanity schema
Read localised documents
Strip down design
---
 src/routes/[lang=lang]/sections/contact.svelte     |  4 +-
 src/routes/[lang=lang]/sections/description.svelte |  6 ++-
 src/routes/[lang=lang]/sections/hero.svelte        | 61 +++-------------------
 src/routes/[lang=lang]/sections/products.svelte    | 15 ++++--
 4 files changed, 24 insertions(+), 62 deletions(-)

(limited to 'src/routes/[lang=lang]/sections')

diff --git a/src/routes/[lang=lang]/sections/contact.svelte b/src/routes/[lang=lang]/sections/contact.svelte
index b058180..2898e83 100644
--- a/src/routes/[lang=lang]/sections/contact.svelte
+++ b/src/routes/[lang=lang]/sections/contact.svelte
@@ -23,9 +23,9 @@
 
 {#if visible}
 	<section class="contact relative z-1">
-		<div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl">
+		<div class="mx-auto">
 			<div class="mb-8 lg:mb-12">
-				<h1 class="text-center">{$LL.contact.title()}</h1>
+				<h3>{$LL.contact.title()}</h3>
 			</div>
 
 			<div class="grid grid-cols-12 gap-8 lg:gap-12">
diff --git a/src/routes/[lang=lang]/sections/description.svelte b/src/routes/[lang=lang]/sections/description.svelte
index 79a3939..1fc23ab 100644
--- a/src/routes/[lang=lang]/sections/description.svelte
+++ b/src/routes/[lang=lang]/sections/description.svelte
@@ -1,7 +1,9 @@
 <script context="module" lang="ts">
+	import type { SanityBlockArray } from "$lib/sanity/types/block-array";
+
 	export type DescriptionModel = {
 		title: string;
-		content?: any;
+		content?: SanityBlockArray;
 	};
 </script>
 
@@ -19,7 +21,7 @@
 </script>
 
 {#if visible}
-	<h3>{model.title}</h3>
+	<h3 class="mb-3">{model.title}</h3>
 	{#if model.content}
 		<PortableText value={model.content} />
 	{/if}
diff --git a/src/routes/[lang=lang]/sections/hero.svelte b/src/routes/[lang=lang]/sections/hero.svelte
index 3cdf221..8a874dc 100644
--- a/src/routes/[lang=lang]/sections/hero.svelte
+++ b/src/routes/[lang=lang]/sections/hero.svelte
@@ -1,7 +1,9 @@
 <script context="module" lang="ts">
+	import type { SanityBlockArray } from "$lib/sanity/types/block-array";
+
 	export type HeroModel = {
 		title: string;
-		content?: any;
+		content?: SanityBlockArray;
 	};
 </script>
 
@@ -19,57 +21,8 @@
 </script>
 
 {#if visible}
-	<section class="has-section-divider-bottom bg-contrast-low/50">
-		<div class="py-20 lg:py-32">
-			<div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-lg md:max-w-3xl">
-				<div class="text-component">
-					<h1>{model.title}</h1>
-					{#if model.content}
-						<PortableText value={model.content} />
-					{/if}
-				</div>
-			</div>
-		</div>
-
-		<div class="section-divider">
-			<svg viewBox="0 0 1920 60" aria-hidden="true">
-				<path
-					class="fill-floor"
-					d="M-153.5,85.5a4002.033,4002.033,0,0,1,658-71c262.854-6.5,431.675,15.372,600,27,257.356,17.779,624.828,19.31,1089-58v102Z"
-				/>
-			</svg>
-		</div>
-	</section>
+	<h1>{model.title}</h1>
+	{#if model.content}
+		<PortableText value={model.content} />
+	{/if}
 {/if}
-
-<style lang="postcss">
-	:root {
-		--section-divider-width: 1920;
-		--section-divider-height: 60;
-		--section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width));
-	}
-
-	[class*="has-section-divider"] {
-		position: relative;
-	}
-
-	.has-section-divider-bottom {
-		padding-bottom: var(--section-divider-ratio);
-	}
-
-	.section-divider {
-		position: absolute;
-		bottom: -1px;
-		left: 0;
-		width: 100%;
-		overflow: hidden;
-	}
-	.section-divider svg {
-		position: relative;
-		display: block;
-		height: auto;
-		max-width: none;
-		width: 102%;
-		left: -1%;
-	}
-</style>
diff --git a/src/routes/[lang=lang]/sections/products.svelte b/src/routes/[lang=lang]/sections/products.svelte
index 816e276..a2999dc 100644
--- a/src/routes/[lang=lang]/sections/products.svelte
+++ b/src/routes/[lang=lang]/sections/products.svelte
@@ -1,4 +1,5 @@
 <script context="module" lang="ts">
+	import type { SanityBlockArray } from "$lib/sanity/types/block-array";
 	export type ProductsModel = {
 		products: ProductModel[];
 	};
@@ -7,13 +8,14 @@
 		title: string;
 		duration: string;
 		cost: string;
-		description: string;
+		description: SanityBlockArray;
 		orderLink: string;
 	};
 </script>
 
 <script lang="ts">
 	import CardV4 from "$components/card-v4.svelte";
+	import LL from "$i18n/i18n-svelte";
 
 	export let model: ProductsModel;
 
@@ -28,14 +30,19 @@
 {#if visible}
 	<div class="wrapper">
 		{#each model.products as product}
-			<CardV4 description={product.description} title={product.title} />
+			<CardV4 description={product.description} title={product.title}>
+				<div class="flex flex-wrap justify-end align-bottom">
+					<a href={product.orderLink} class="btn btn--primary">{$LL.goToBookingPage()}</a>
+				</div>
+			</CardV4>
 		{/each}
 	</div>
 {/if}
 
 <style lang="postcss">
 	.wrapper {
-		display: grid;
-		grid-template-columns: repeat(50%);
+		display: flex;
+		flex-direction: row;
+		gap: 1em
 	}
 </style>
-- 
cgit v1.3